<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            border: 1px solid #cccccc;
            padding: 10px;
        }
        .box{
            border: 1px solid #cccccc;
            margin-left: 50px;
            padding: 10px;
            margin-bottom: 10px;
        }
        p{
            padding-left: 20px;
        }
        input{
            margin-left: 20px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>父组件-A</h3>
        <child-b></child-b>
        <child-c></child-c>
    </div>
</body>
<script type="text/x-template" id="b">
    <div class="box">
        <h3>子组件-B-范围</h3>
        <child-d></child-d>
        <child-e></child-e>
    </div>
</script>
<script type="text/x-template" id="c">
    <div class="box">
        <h3>子组件-C-范围</h3>
        <p>temp:{{ temp }}</p>
    </div>
</script>
<script type="text/x-template" id="d">
    <div class="box">
        <h3>子组件-D-范围</h3>
        <p>info:{{ info }}</p>
        <!-- 实例方法和实例属性可以直接在页面的事件行内表达式中定义 -->
        <input type="button" value="发送info" @click=" $root.$emit('update-info',info) ">
    </div>
</script>
<script type="text/x-template" id="e">
    <div class="box">
        <h3>子组件-E-范围</h3>
    </div>
</script>
<script>
    // 中央事件总线的 构成口诀
    //      提供数据使用 emit 定义在 mounted 中
    //      接收数据使用 on 定义在beforeMount 中
    // 使用中央事件总线进行数据传递时，必须保持事件的绑定早于事件触发
    Vue.component("ChildB",{
        template:"#b",
        beforeMount() {
            console.log("=>=>组件B-beforeMount");
        },
        mounted() {
            console.log("=>=>组件B-mounted");
        },
    });
    Vue.component("ChildC",{
        template:"#c",
        data(){
            return {
                temp:""
            }
        },
        // created() {
        //     // console.log(this.$root);  
        //     this.$root.$on("update-info",(nv)=>{
        //         this.temp = nv;
        //     })
        // },
        beforeMount() {
            console.log("=>=>组件C-beforeMount");
            this.$root.$on("update-info",(nv)=>{
                this.temp = nv;
            })
        },
        mounted() {
            console.log("=>=>组件C-mounted");
        },
    });
    Vue.component("ChildD",{
        template:"#d",
        data(){
            return {
                info:"组件D的传递数据info"
            }
        },
        // created() {
        //     // console.log( JSON.stringify(this.$root._events) );  
        //     this.$root.$emit("update-info",this.info)
        // },
        beforeMount() {
            console.log("=>=>=>组件D-beforeMount");
        },
        mounted() {
            console.log("=>=>=>组件D-mounted");
            this.$root.$emit("update-info",this.info)
        },
    });
    Vue.component("ChildE",{
        template:"#e",
        beforeMount() {
            console.log("=>=>=>组件E-beforeMount");
        },
        mounted() {
            console.log("=>=>=>组件E-mounted");
        },
    });

    new Vue({
        el:"#app",
        beforeMount() {
            console.log("=>组件A-beforeMount");
        },
        mounted() {
            console.log("=>组件A-mounted");
        },
    });
</script>
</html>